<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

import vueMkHeader from "@/assets/img/products/badlands/bg.png";
import bottom from "@/assets/img/products/badlands/bottom.png";
import tire from "@/assets/img/products/detail/tire.png";
import icon1 from "@/assets/img/products/badlands/icon1.png";
import icon2 from "@/assets/img/products/badlands/icon2.png";
import icon3 from "@/assets/img/products/badlands/icon3.png";
import icon4 from "@/assets/img/products/badlands/icon4.png";
import icon5 from "@/assets/img/products/badlands/icon5.png";
import icon6 from "@/assets/img/products/badlands/icon6.png";

import tire1 from "@/assets/img/products/detail/tire1.png";

import bg1 from "@/assets/img/products/detail/bg1.png";
import bg2 from "@/assets/img/products/detail/bg2.png";
import bg3 from "@/assets/img/products/detail/bg3.png";
import bg4 from "@/assets/img/products/detail/bg4.png";

import HIGHLIGHTS from "@/assets/img/products/detail/highlights/HIGHLIGHTS.png";
import highbg1 from "@/assets/img/products/detail/highlights/bg1.png";
import highbg2 from "@/assets/img/products/detail/highlights/bg2.png";
import highbg3 from "@/assets/img/products/detail/highlights/bg3.png";
import highbg4 from "@/assets/img/products/detail/highlights/bg4.png";
import bg from "@/assets/img/products/detail/highlights/bg.png";
const props = defineProps({
  image: {
    type: String,
  },
});
const iconList = [
  {
    id: 1,
    icon: icon1,
  },
  {
    id: 2,
    icon: icon2,
  },
  {
    id: 3,
    icon: icon3,
  },
  {
    id: 4,
    icon: icon4,
  },
  {
    id: 5,
    icon: icon5,
  },
  {
    id: 6,
    icon: icon6,
  },
];
const router = useRouter();
</script>
<template>
  <div style="background: #f5f5f5">
    <div class="container py-6">
      <div class="mb-6 d-flex justify-content-center">
        <div class="tire1">
          <img :src="HIGHLIGHTS" alt="" class="img-fluid" />
        </div>
      </div>
      <img style="width: 100%" :src="image" alt="" class="img-fluid" />

      <!-- <div class="row">
                <div class="col-lg-4 text-center mb-4">
                    <img style="width: 90%" :src="tire" alt="" class="img-fluid border-radius-lg tire" />
                </div>
                <div class="col-lg-4 text-center">
                    <img style="width: 84%" :src="tire1" alt="" class="img-fluid border-radius-lg tire1" />
                </div>
                <div class="col-lg-4 text-center">
                    <img style="width: 84%" :src="tire1" alt="" class="img-fluid border-radius-lg tire1" />
                </div>
            </div> -->

      <!-- <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div style="position: relative">
                            <img style="width: 100%" :src="bg1" alt="" class="img-fluid border-radius-lg" />
                            <h1 class="text-white text-f-ERASBD" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%)">
                                Tread<br />
                                Design
                            </h1>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div style="position: relative">
                            <img style="width: 100%" :src="bg2" alt="" class="img-fluid border-radius-lg" />
                            <h1 class="text-white text-f-ERASBD" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%)">
                                Stepped<br />
                                Down Groove
                            </h1>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div style="position: relative">
                            <img style="width: 100%" :src="bg3" alt="" class="img-fluid border-radius-lg" />
                            <h1 class="text-white text-f-ERASBD" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%)">
                                Optimized<br />
                                Siping
                            </h1>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div style="position: relative">
                            <img style="width: 100%" :src="bg4" alt="" class="img-fluid border-radius-lg" />
                            <h1 class="text-white text-f-ERASBD" style="position: absolute; top: 50%; left: 8%; transform: translateY(-50%)">
                                Enhanced<br />
                                Voids
                            </h1>
                        </div>
                    </div>
                </div>
            </div> -->
    </div>
  </div>
</template>

<style scoped>
.dot {
  width: 1rem;
  height: 1rem;
  background: #ed1c24;
  border-radius: 0.5rem;
  margin-right: 1rem;
  flex-shrink: 0;
  margin-top: 1rem;
}
.text-item {
  display: flex;
  margin: 1rem 0;
}
.content {
  width: calc(100% - 3rem);
  font-size: 2rem;
  color: #000;
}
.tire1 {
  width: 45% !important;
}
@media (max-width: 992px) {
  .tire {
    width: 60% !important;
  }
  .tire1 {
    width: 80% !important;
  }
}
</style>
